<template>
 <el-row :gutter="12" class="iconTable">
  <div class="m-table">
   <el-col :span="8">
    <el-card shadow="never">
     <h6>
      <span>BTC</span>

      <span class="add">5.83 %</span>
     </h6>

     <p>$ 39557.27</p>
    </el-card>
   </el-col>

   <el-col :span="8">
    <el-card shadow="never">
     <h6>
      <span>ETH</span>

      <span class="add">5.83 %</span>
     </h6>

     <p>$ 39557.27</p>
    </el-card>
   </el-col>

   <el-col :span="8">
    <el-card shadow="never">
     <h6>
      <span>DFT</span>

      <span class="reduce">5.83 %</span>
     </h6>

     <p>$ 39557.27</p>
    </el-card>
   </el-col>
  </div>
 </el-row>
</template>

<script>
export default {
 name: "IconTable"
}
</script>

<style scoped lang="scss">
.iconTable {
 width: 100%;
 background-color: #ffffff;
 padding: 50px 0;
 margin-top: 40px;
 display: flex;
 align-items: center;
 justify-content: center;

 .m-table {
  max-width: 935px;
  width: 95%;

  .el-col {
   padding: 0 10px !important;

   .el-card {
    border: none;
    background-color: #F5FAFF;
    padding: 30px 20px 40px;

    /deep/ .el-card__body {
     padding: 0;
    }

    h6 {
     font-size: 22px;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: space-between;

     span {
      &.add {
       color: #34c083;
      }
      &.reduce {
       color: #f56c6c;
      }
     }
    }

    p {
     font-size: 26px;
     font-weight: bold;
     padding-top: 20px;
     color: #002445;
    }
   }
  }
 }
}
</style>
